<template>
  <div
    :style="{height: height === 'auto' ? '200px' : height + 'px'}"
    style="position:relative;border-bottom:2px solid #fff;background:#9baebb;width:182px;"
  >
    <div style="height:52px;border-left:2px solid #00704E;color:#fff">
      <div style="padding-left:8px;height:40%;fontSize: 14px;">充电站个数</div>
      <div style="padding-left:8px;height:60%;">
        <div style="font-size:30px">1091</div>
      </div>
    </div>
    <img src="../../static/image/images/4.png" style="position:absolute;left:20px;top:70px;">
    <div
      style="height:120px;width:120px;position:absolute;left:66px;top:26px"
      ref="myChart"
    >
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      height: 139,
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      var myChart = echarts.init(this.$refs.myChart);
      var data = 739; //数值大小
      var max = 1000; //满刻度大小
      var option = {
        title: [
          {
            text: "正在充电",
            x: "center",
            top: "52%",
            textStyle: {
              color: "#fff",
              fontSize: 12,
              fontWeight: "100",
            },
          },
          {
            text: data,
            x: "center",
            top: "34%",
            textStyle: {
              color: "#fff",
              fontSize: 20,
              fontWeight: "500",
            },
          },
        ],
        grid: {
          // show: true,
          left: "0%",
          right: "0%",
          top: "10%",
          bottom: "0%",
          containLabel: true,
        },
        color: ["#fff", "#fff", "rgba(255,255,255,.2)"],
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["76%", "60%"],
            hoverAnimation: false,
            startAngle: "-90",
            clockwise: true,
            data: [
              {
                name: "",
                value: data,
                label: {
                  show: true,
                  position: "center",
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0.6,
                        color: "#34b26a",
                      },
                      {
                        offset: 1,
                        color: "#34b26a",
                      },
                    ]),
                  },
                },
              },
              {
                //画中间的图标
                name: "",
                value: 0,
                label: {
                  position: "outer",
                  backgroundColor: {
                    image:
                      "",
                  },
                  width: 4,
                  height: 4,
                  borderRadius: 4,
                  padding: 4,
                },
                labelLine: {
                  length: 12,
                  length2: 0,
                  lineStyle: {
                    color: "rgb(42, 107, 165)",
                  },
                },
              },
              {
                //画剩余的刻度圆环
                name: "",
                value: max - data,
                labelLine: {
                  show: false,
                  lineStyle: {
                    color: "rgb(42, 107, 165,0)",
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#006F4E",
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.css {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>